<template>
  <y-dialog @open="open" @close="emit('close')" width="1000px" append-to-body>
    <el-form
      ref="addRef"
      :model="form"
      :rules="rules"
      size="default"
      label-width="120px"
    >
      <el-row>
        <el-col>
          <el-form-item label="缺陷名称" prop="name">
            <el-input
              v-model="form.name"
              placeholder="请输入缺陷名称"
              clearable
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="所属产品" prop="product">
            <y-select
              v-model="form.product"
              placeholder="请选择所属产品"
              :optionsFunc="listProduct"
              @change="changeProductOptions"
              :disabled="['update'].includes(props.operate)"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="所属模块" prop="module">
            <y-tree-select
              v-model="form.module"
              :optionsFunc="treeselect"
              :optionsParams="queryParams"
              @change="changeModuleOptions"
              placeholder="请选择所属模块"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="影响版本" prop="version">
            <y-select
              v-model="form.version"
              placeholder="请选择影响版本"
              :optionsFunc="listVersion"
              :optionsParams="queryParams"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="缺陷类型" prop="type">
            <y-select
              v-model="form.type"
              placeholder="请选择缺陷类型"
              :options="tms_bug_type"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="严重性" prop="gravity">
            <y-select
              v-model="form.gravity"
              placeholder="请选择严重性"
              :options="sys_gravity_level"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="优先级" prop="priority">
            <y-select
              v-model="form.priority"
              placeholder="请选择优先级"
              :options="sys_priority_level"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="测试接口人" prop="towner">
            <y-select
              v-model="form.towner"
              placeholder="请选择测试接口人"
              :optionsFunc="listUser"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="开发接口人" prop="downer">
            <y-select
              v-model="form.downer"
              placeholder="请选择开发接口人"
              :optionsFunc="listUser"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="期望解决时间" prop="resolved_time_expected">
            <el-date-picker
              v-model="form.resolved_time_expected"
              type="datetime"
              placeholder="请选择期望解决时间"
              style="width: 100%"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col>
          <el-form-item label="关联用例" prop="tcs">
            <y-select
              v-model="form.tcs"
              placeholder="请选择关联用例"
              :optionsFunc="listTestCase"
              :optionsParams="queryParams"
              multiple
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col>
          <el-form-item label="缺陷描述" prop="description">
            <y-editor
              editorId="editorBugDesc"
              v-model="form.description"
              placeholder="请输入缺陷描述"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col>
          <el-form-item label="备注" prop="remark">
            <el-input
              v-model="form.remark"
              type="textarea"
              :rows="5"
              placeholder="请输入备注信息"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col>
          <el-form-item label="标签" prop="tags">
            <y-tag v-model="form.tags" :closable="true" />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="submit">确定</el-button>
        <el-button type="warning" @click="reset">重置</el-button>
        <el-button @click="emit('close')">取消</el-button>
      </div>
    </template>
  </y-dialog>
</template>

<script setup name="AuBug">
import { listProduct } from "@/api/pms/product";
import { listVersion } from "@/api/pms/version";
import { treeselect } from "@/api/pms/module";
import { listTestCase } from "@/api/tms/testcase";
import { listUser } from "@/api/sys/user";

const { proxy } = getCurrentInstance();
const { tms_bug_type, sys_gravity_level, sys_priority_level, sys_yes_no } =
  proxy.useDict(
    "tms_bug_type",
    "sys_gravity_level",
    "sys_priority_level",
    "sys_yes_no"
  );

const emit = defineEmits(["submited", "close"]);

const data = reactive({
  form: {},
  queryParams: {
    product: undefined,
    version: undefined,
    module: undefined,
    nopaginate: true,
  },
  rules: {
    name: [{ required: true, message: "缺陷名称不能为空", trigger: "blur" }],
    product: [{ required: true, message: "所属产品不能为空", trigger: "blur" }],
    version: [{ required: true, message: "影响版本不能为空", trigger: "blur" }],
    module: [{ required: true, message: "所属模块不能为空", trigger: "blur" }],
    type: [{ required: true, message: "缺陷类型不能为空", trigger: "blur" }],
    gravity: [{ required: true, message: "严重性不能为空", trigger: "blur" }],
    priority: [{ required: true, message: "优先级不能为空", trigger: "blur" }],
    resolved_time_expected: [
      { required: true, message: "期望解决时间不能为空", trigger: "blur" },
    ],
    towner: [
      { required: true, message: "测试接口人不能为空", trigger: "blur" },
    ],
    tcs: [{ required: true, message: "关联用例不能为空", trigger: "blur" }],
    description: [
      { required: true, message: "缺陷描述不能为空", trigger: "blur" },
    ],
  },
});

const { queryParams, form, rules } = toRefs(data);

const props = defineProps({
  id: { type: String, default: "" },
  operate: { type: String, default: "add" },
  getMethod: { type: Function, default: undefined },
  addMethod: { type: Function, default: undefined },
  updateMethod: { type: Function, default: undefined },
});

/** 获取选中的产品对象信息 */
function changeProductOptions(val) {
  queryParams.value.product = val;
  form.value.version = undefined;
  form.value.module = undefined;
}

/** 获取选中的模块对象信息 */
function changeModuleOptions(val) {
  queryParams.value.module = val;
}

/** 更新标签方法 */
function handleTagsUpdate(data) {
  form.value.tags = data;
}

/** 打开对话框事件 */
function open() {
  switch (props.operate) {
    case "update":
      props.getMethod(props.id).then((res) => {
        form.value = res.data;
        queryParams.value.product = form.value.product.value;
        queryParams.value.version = form.value.version.value;
        queryParams.value.module = form.value.module.value;
      });
      break;
    default:
      reset();
      break;
  }
}

/** 重置Form方法 */
function reset() {
  form.value = {
    gravity: "0",
    status: "new",
    priority: "0",
    description:
      '<p><span style="background-color: white;">【简要描述】：必填</span></p><p><span style="background-color: white;">【预期结果】：必填</span></p><p><span style="background-color: white;">【实际结果】：必填</span></p><p><span style="background-color: white;">【定位人】：必填</span></p><p><span style="background-color: white;">【定位结论】：必填</span></p><p><span style="background-color: white;">【被测版本】：必填</span></p><p><span style="background-color: white;">【问题来源】：[手工测试/自动化测试/鹰眼监控]</span></p><p><span style="background-color: white;">【是否重现】：[必然重现/有条件重现/随机重现/无法重现]</span></p><p><span style="background-color: white;">【样本数据】：选填</span></p><p><span style="background-color: white;">【复现步骤】：</span></p><p><span style="background-color: white;">1）XXX</span></p><p><span style="background-color: white;">2）XXX</span></p><p><span style="background-color: white;">3）XXX</span></p><p><span style="background-color: white;">【详细内容】：</span></p><p> </p> ',
  };
  proxy.resetForm("addRef");
}

/** 提交按钮事件 */
function submit() {
  proxy.$refs["addRef"].validate((valid) => {
    if (valid) {
      if (form.value.id != undefined) {
        form.value.tcs = proxy.formatOptions(form.value.tcs);
        props.updateMethod(form.value).then((res) => {
          proxy.$modal.msgSuccess("修改成功");
          submited();
        });
      } else {
        props.addMethod(form.value).then((res) => {
          proxy.$modal.msgSuccess("新增成功");
          submited();
        });
      }
    }
  });
}

/** submited事件 */
function submited() {
  emit("submited");
  emit("close");
}
</script>
